<template>
    <div>
      <h2>编辑个人信息</h2>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/MemberMain">主页</el-breadcrumb-item>
        <el-breadcrumb-item to="/MemberMain/MemberInfo">个人信息</el-breadcrumb-item>
        <el-breadcrumb-item>编辑个人信息</el-breadcrumb-item>
      </el-breadcrumb>
  
      <el-card style="margin-top: 20px;">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
          <el-form-item label="会员账号/卡号">
            <el-input v-model="form.memberAccount" readonly></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="memberName">
            <el-input v-model="form.memberName"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="memberGender">
            <el-input v-model="form.memberGender"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="memberAge">
            <el-input v-model="form.memberAge" type="number"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="memberPhone">
            <el-input v-model="form.memberPhone"></el-input>
          </el-form-item>
          <el-form-item label="身高" prop="memberHeight">
            <el-input v-model="form.memberHeight" type="number"></el-input>
          </el-form-item>
          <el-form-item label="体重" prop="memberWeight">
            <el-input v-model="form.memberWeight" type="number"></el-input>
          </el-form-item>
  
          <el-form-item>
            <el-button type="success" @click="onSubmit">确认修改</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  
  const router = useRouter()
  const formRef = ref(null)
  
  const form = ref({
    memberAccount: '',
    memberName: '',
    memberGender: '',
    memberAge: '',
    memberPhone: '',
    memberHeight: '',
    memberWeight: ''
  })
  
  // 表单验证规则
  const rules = {
    memberName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    memberPhone: [
      { required: true, message: '请输入联系方式', trigger: 'blur' },
      { pattern: /^[1][3-9][0-9]{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
    ]
  }

  /*onMounted(() => {
    const memberInfo = localStorage.getItem('memberInfo')
    if (memberInfo) {
      const parsedInfo = JSON.parse(memberInfo)
      form.value = parsedInfo
    } else {
      ElMessage.error('未获取到会员信息')
    }
  })*/

  // 页面加载时获取当前用户信息
   onMounted(() => {
     axios.get('/server/member/getMyInfo',{
       headers: {
         'Authorization': localStorage.getItem('token')
       }
     })
       .then(response => {
         if (response.data.code === 200) {
           form.value = response.data.data
         } else {
           ElMessage.error('无法加载个人信息')
         }
       })
       .catch(() => {
         ElMessage.error('请求失败')
       })
   })
  
  // 提交修改
  const onSubmit = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        axios.put('/server/member/update', form.value,{
          headers: {
            'Authorization': localStorage.getItem('token')
          },
          withCredentials: true
        })
          .then(response => {
            if (response.data.code === 200) {
              ElMessage.success('修改成功')
              localStorage.setItem('memberInfo', JSON.stringify(response.data.data))
              router.push('/MemberMain/MemberInfo')
            } else {
              ElMessage.error('修改失败: ' + response.data.message)
            }
          })
          .catch(() => {
            ElMessage.error('请求失败，无法修改')
          })
      } else {
        ElMessage.error('请完善表单信息')
      }
    })
  }
  
  const onCancel = () => {
    router.push('/MemberMain/MemberInfo')
  }
  </script>
  
  <style scoped>
  h2 {
    margin-bottom: 10px;
  }
  </style>
  